<template>
  <div class="listWrap">
    <!-- 内容上 -->
    <div class="bgBox">
      <img :src="industry.picture" alt />
      <!-- 标题 -->
      <div class="title">{{industry.title}}</div>
      <!-- 关闭按钮 -->
      <div class="backBtn" @click="handleBack">
        <img src="../../../../assets/imgs/close.png" alt />
      </div>
    </div>
    <!-- 内容下 -->
    <div class="listBox">
      <div
        class="item"
        v-for="item in industryList"
        :key="item.id"
        @click="handleToUrl(item.videoUrl)"
      >
        <img :src="item.picture" />
        <div class="info">
          <span class="tip" :style="{background: item.color}">{{item.tag.toUpperCase()}}</span>
          <p class="ellipsis2">{{item.title}}</p>
          <div class="collectBox" @click.stop="handleCollect(item)">
            <img v-if="!item.isFavourite" src="../../../../assets/imgs/s2.png" class="sImg" />
            <img v-if="item.isFavourite" src="../../../../assets/imgs/s1.png" class="sImg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from 'servicePath/index'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      industryList: [],
      industry: {}
    }
  },
  computed: {
    ...mapState(['lang', 'tags'])
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    handleGetColor(tag) {
      const arr = this.tags.filter(v => v.name == tag.toLowerCase())
      return (arr.length && arr[0].color) || '#ff7132'
    },
    // 返回上一页
    handleBack() {
      this.$router.go(-1)
    },
    // 获取列表
    async handleGetList() {
      const parmas = {
        langeuage: this.lang,
        industryId: this.$route.params.industryId
      }
      const res = await api.getCaseList(parmas)
      this.industryList = res.data || []
      this.industry = res.extraData || {}
    },
    async handleCollect(record) {
      if (!sessionStorage.getItem('loginInfo')) {
        this.$router.push({
          path: '/fakuma/wap/login'
        })
        return
      }
      const parmas = {
        caseId: record.id,
        isFavourite: !record.isFavourite
      }
      const res = await api.collectCaseList(parmas)
      this.$toast(this.$t('vr.czcg'))
      this.handleGetList()
    },
    handleToUrl(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.listWrap {
  position: relative;
  .bgBox {
    position: relative;
    // height: 240px;
    overflow: hidden;
    img {
      width: 100%;
      // height: 240px;
      vertical-align: bottom;
    }
    .title {
      position: absolute;
      z-index: 9;
      left: 10px;
      bottom: 0;
      font-size: 20px;
      background: #ffffff4d;
      color: #fff;
      padding: 10px 20px;
      border-radius: 10px 10px 0 0;
    }
    .backBtn {
      position: absolute;
      z-index: 9;
      width: 25px;
      height: 25px;
      left: 10px;
      top: 10px;
      text-align: center;
      img {
        width: 18px;
        height: 18px;
      }
    }
  }
  .listBox {
    padding: 25px 30px;
    padding-bottom: 0;
    .item {
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 25px;
      img {
        width: 100%;
        height: 160px;
        vertical-align: bottom;
      }
      .info {
        position: relative;
        display: flex;
        justify-content: space-between;
        background: #f0f0f0;
        padding: 15px 12px;
        .tip {
          position: absolute;
          background: #ff7132;
          color: #fff;
          top: -14px;
          left: 10px;
          padding: 4px 8px;
          font-size: 14px;
        }
        .collectBox {
          margin-left: 10px;
          i {
            font-size: 20px;
          }
          .sImg {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
}
</style>